<template>
  <div class="home">
    <el-row>
      <el-col :span="4" class="left-box">
        <el-tabs v-model="activeName" @tab-click="handleClick">
          <el-tab-pane label="配置项" name="option">
            <selectTree :optionType="'option'"></selectTree>
          </el-tab-pane>
          <el-tab-pane label="API" name="api">
            <selectTree :optionType="'api'"></selectTree>
          </el-tab-pane>
<!--          <el-tab-pane label="GL配置" name="gloption">-->
<!--            <selectTree :optionType="'gloption'"></selectTree>-->
<!--          </el-tab-pane>-->
        </el-tabs>
      </el-col>
      <el-col :span="20">
        <apiContent :optionType="activeName" ref="apiContent" ></apiContent>
      </el-col>
    </el-row>
  </div>
</template>

<script>
export default {
  name: "file",
  components: {
    selectTree: () => import('@/components/selectTree/index'),
    apiContent:()=>import('@/components/apiContent/index')
  },
  data() {
    return {
      activeName: "option",
      activekey:''
    };
  },
  provide(){
    return {
      parentInit:this.init,
      handleSwitchItem:this.handleSwitchItem
    }
  },
  mounted() {

  },
  methods: {
    handleClick(id) {
    },
    handleSwitchItem(id) {
      this.$refs.apiContent&&this.$refs.apiContent.init(id)
    },
    init(){
      this.$nextTick(()=>{
        this.$refs.apiContent&&this.$refs.apiContent.init('0-0-1')
      })
    }
  },
};
</script>

<style scoped>
.home {
  width: 100%;
  height: 100%;
}
.echarts-api-content,.left-box{
  height:calc(100vh - 56px);
  overflow-y: auto;

}

</style>
